<template>
    <div class="collect">
        <!-- 顶部导航 -->
        <div class="collect-top">
            <ul>
                <li
                    :class="{ co_liact: icur == 0 }"
                    @click="(icur = 0), checknav()"
                >
                    商品收藏
                </li>
                <li
                    :class="{ co_liact: icur == 1 }"
                    @click="(icur = 1), checknav()"
                >
                    职位收藏
                </li>
                <li
                    :class="{ co_liact: icur == 2 }"
                    @click="(icur = 2), checknav()"
                >
                    资讯收藏
                </li>
                <li
                    :class="{ co_liact: icur == 3 }"
                    @click="(icur = 3), checknav()"
                >
                    培训收藏
                </li>
            </ul>
        </div>
        <!--没有收藏-s-->
        <div class="comment_con p" v-if="pageList.length <= 0 && noneIskey">
            <div class="none">
                <img
                    src="../../assets/images/none.png"
                /><br /><br />亲，此处还没有收藏哦~
            </div>
        </div>
        <!--商品收藏-->
        <div class="floor guesslike" v-if="icur == 0">
            <div class="likeshop">
                <ul id="goods_list">
                    <li v-for="(item, index) in pageList" :key="index">
                        <div class="similer-product">
                            <a
                                class="simidibl"
                                @click="
                                    $router.push({
                                        path: '/shopDetail',
                                        query: { id: item.goods_id },
                                    })
                                "
                            >
                                <img :src="item.img_link" />
                            </a>
                            <span
                                @click="
                                    $router.push({
                                        path: '/shopDetail',
                                        query: { id: item.goods_id },
                                    })
                                "
                                class="similar-product-text"
                                style="padding: 0 0.3rem"
                                >{{ item.goods_name }}</span
                            >
                            <span class="similar-product-price">
                                <span class="big-price"
                                    ><em>¥</em
                                    ><em>{{ item.shop_price }}</em></span
                                >
                                <a
                                    ><span
                                        class="guess-button J_ping"
                                        @click="quxiaoCollect(item.goods_id)"
                                        >取消收藏</span
                                    ></a
                                >
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 职位收藏列表 -->
        <div class="n_j2" v-if="icur == 1">
            <a class="j2_item" v-for="(item, index) in pageList" :key="index">
                <div
                    class="j2_t1 font15 substring"
                    @click="
                        $router.push({
                            path: '/jobFindDetail',
                            query: { id: item.jobs_id },
                        })
                    "
                >
                    {{ item.jobs_name }}
                    <div class="t_right font13">{{ item.wage_cn }}</div>
                </div>
                <div class="j2_t2 font13">
                    {{ item.experience_cn }} | {{ item.education_cn }} |
                    {{ item.age_cn }}
                    <div
                        class="t_bt font12 J_close"
                        jid="3"
                        @click="quxiaoCollect(item.jobs_id)"
                    >
                        取消收藏
                    </div>
                </div>
                <div
                    class="j2_t3 font13 substring"
                    @click="
                        $router.push({
                            path: '/jobFindDetail',
                            query: { id: item.jobs_id },
                        })
                    "
                >
                    {{ item.companyname }}
                    <div class="t_right substring">{{ item.district_cn }}</div>
                </div>
            </a>
        </div>
        <!-- 咨询收藏列表 -->
        <div class="j_zixun_listbox" v-if="icur == 2">
            <a
                class="j_zixun_li1"
                v-for="(item, index) in pageList"
                :key="index"
                ><dl
                    @click="
                        $router.push({
                            path: '/zixunDetail',
                            query: { id: item.article_id },
                        })
                    "
                >
                    <dd>{{ item.title }}</dd>
                    <dt>
                        <img :src="item.thumb" alt="" @error="errorImage" />
                    </dt>
                </dl>
                <p>
                    发布时间：{{ item.add_time
                    }}<span
                        class="guess-button J_ping"
                        @click="quxiaoCollect(item.article_id)"
                        >取消收藏</span
                    >
                </p></a
            >
        </div>
        <!-- 培训收藏列表 -->
        <div class="j_zixun_listbox" v-if="icur == 3">
            <a
                class="j_zixun_li1"
                v-for="(item, index) in pageList"
                :key="index"
                ><dl
                    @click="
                        $router.push({
                            path: '/peixunDetial',
                            query: { id: item.peixun_id },
                        })
                    "
                >
                    <dd>{{ item.peixun_name }}</dd>
                    <dt>
                        <img
                            :src="item.peixun_img"
                            alt=""
                            @error="errorImage"
                        />
                    </dt>
                </dl>
                <p>
                    发布时间：{{ item.add_time
                    }}<span
                        class="guess-button J_ping"
                        @click="quxiaoCollect(item.peixun_id)"
                        >取消收藏</span
                    >
                </p></a
            >
        </div>
        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>
    </div>
</template>

<script>
import { axiosPost, axiosGet } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            icur: 0,
            page_size: 10,
            noneIskey: false,

            pageList: [],
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        let icur = sessionStorage.collectIcur;
        if (icur) {
            this.icur = icur;
        }
        this.checknav();
    },
    methods: {
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            switch (this.icur) {
                case 0:
                    this.getShopcollect(data);
                    break;
                case 1:
                    this.getZhiweicollect(data);
                    break;
                case 2:
                    this.getNewsList(data);
                    break;
                case 3:
                    this.getPeixunList(data);
                    break;
                default:
                    break;
            }
        },
        checknav() {
            this.pageList = [];
            this.noneIskey = false;
            this.pageInfo.pageSatus = false;
            sessionStorage.collectIcur = this.icur;
            switch (parseInt(this.icur)) {
                case 0:
                    this.getShopcollect();
                    break;
                case 1:
                    this.getZhiweicollect();
                    break;
                case 2:
                    this.getNewsList();
                    break;
                case 3:
                    this.getPeixunList();
                    break;
                default:
                    break;
            }
        },
        // 获取商品收藏
        getShopcollect(page = 1) {
            axiosPost(
                '/api/user/collect_list',
                {
                    page: page,
                    page_size: this.page_size,
                },
                (res) => {
                    // console.log(res);
                    this.noneIskey = true;
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.collect_list.forEach((element) => {
                        this.pageList.push(element);
                    });
                }
            );
        },
        // 获取职位收藏
        getZhiweicollect(page = 1) {
            axiosGet(
                '/apis/personal/jobs_favorites',
                {
                    page: page,
                    page_size: this.page_size,
                },
                (res) => {
                    // console.log(res);
                    this.noneIskey = true;
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.favorites.forEach((element) => {
                        this.pageList.push(element);
                    });
                }
            );
        },
        // 获取新闻列表
        getNewsList(page = 1) {
            axiosGet(
                '/api/user/news_collect_list',
                {
                    page: page,
                    page_size: this.page_size,
                },
                (res) => {
                    // console.log(res);
                    this.noneIskey = true;
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.collect_list.forEach((element) => {
                        this.pageList.push(element);
                    });
                }
            );
        },
        // 获取培训列表
        getPeixunList(page = 1) {
            axiosGet(
                '/api/user/peixun_collect_list',
                {
                    page: page,
                    page_size: this.page_size,
                },
                (res) => {
                    // console.log(res);
                    this.noneIskey = true;

                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.collect_list.forEach((element) => {
                        this.pageList.push(element);
                    });
                }
            );
        },
        // 取消收藏
        quxiaoCollect(id) {
            switch (parseInt(this.icur)) {
                case 0:
                    this.loveShop(id);
                    break;
                case 1:
                    this.zhiweiCollect(id);
                    break;
                case 2:
                    this.changezixunCollect(id);
                    break;
                case 3:
                    this.changepeixunCollect(id);
                    break;
                default:
                    break;
            }
        },
        // 取消培训收藏
        changepeixunCollect(peixun_id) {
            axiosPost(
                '/api/peixun/collect',
                {
                    peixun_id: peixun_id,
                },
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }

                    this.checknav();
                }
            );
        },
        // 收藏商品
        loveShop(id) {
            axiosPost(
                '/api/goods/collect_goods',
                {
                    goods_id: id,
                },
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });

                    this.checknav();
                }
            );
        },
        // 职位收藏
        zhiweiCollect(jid) {
            axiosPost(
                'apis/jobs/favorite',
                {
                    jid: jid,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }

                    this.checknav();
                }
            );
        },
        // 咨询收藏
        changezixunCollect(id) {
            axiosPost(
                '/api/news/collect',
                {
                    article_id: id,
                },
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }

                    this.checknav();
                }
            );
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="less" scope>
.collect {
    .guess-button {
        width: 3.6rem;
        height: 1.2rem;
        border-radius: 0.6rem;
        border: solid 0.02rem #dadada;
        line-height:  1.2rem;
        font-size: 0.6rem;
        display: inline-block;
        text-align: center;
        float: right;
    }
    // 顶部导航
    .collect-top {
        ul {
            height: 1.7493rem;
            background: #fff;

            li {
                float: left;
                font-size: 0.64rem;
                font-weight: 400;
                color: #000000;
                padding: 0.5rem 0.256rem;
                border-bottom: 0.1067rem solid transparent;
                margin: 0 0.45rem;
            }

            .co_liact {
                border-bottom: 0.1067rem solid #fe333d;
                color: #fe333d;
            }
        }
    }
    .similar-product-price .big-price {
        font-size: 0.64rem;
        display: inline-block;
        width: 2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
        font-weight: bold;
    }
    #goods_list li img {
        height: 3.84rem;
        width: 3.84rem;
    }
    #goods_list li {
        width: 15.57rem;
        height: 3.84rem;
        margin: 0.21rem;
        margin-bottom: 0;
        float: left;
        background-color: #ffffff;
    }
    #goods_list li a {
        height: 3.84rem;
        width: 3.84rem;
        display: block;
        float: left;
        margin-right: 0.58rem;
    }
    .guesslike .likeshop ul li .similer-product .similar-product-text {
        width: 9.98rem;
        height: 1.42rem;
        float: left;
        margin-top: 0.45rem;
        padding: 0 !important;
        font-size: 0.55rem;
        color: #181818;
    }
    .similar-product-price {
        float: left;
        padding: 0;
        margin-top: 1.05rem;
        width: 10.5rem;
    }
    #goods_list li .similer-product .similar-product-price a {
        width: 2.13rem;
        height: 0.9rem;
        display: inline-block;
        margin: 0;
        float: right;
        margin-right: 0;
        margin-top: -0.23rem;
    }
    .similar-product-price .big-price em {
        font-size: 0.47rem;
        margin-right: 0.08rem;
    }
    .similar-product-price .guess-button {
        width: 2.8rem;
        height: 0.9rem;
        border-radius: 0.45rem;
        border: solid 0.02rem #dadada;
        line-height: 0.9rem;
        font-size: 0.47rem;
        top: -0.23rem;
        right: 0rem;
    }
    // 收藏的职位
    .n_j2 .j2_item {
        width: 100%;
        background: #ffffff;
        margin-top: 0.2133rem;
        display: block;
        text-decoration: none;
        padding: 0.64rem 0.7467rem 0;
    }
    .n_j2 .j2_item .j2_t1 {
        position: relative;
        width: 100%;
        padding-right: 3.6267rem;
        color: #666666;
    }
    .n_j2 .j2_item .j2_t1 .t_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #ffaf24;
    }
    .n_j2 .j2_item .j2_t2 {
        position: relative;
        width: 100%;
        padding: 0.64rem 0;
        color: #666666;
    }
    .n_j2 .j2_item .j2_t2 .t_bt {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #1787fb;
        padding: 0.1493rem 0.4267rem;
        border: 1px solid #1787fb;
        border-radius: 1.152rem;
    }
    .n_j2 .j2_item .j2_t3 {
        position: relative;
        width: 100%;
        padding: 0.5333rem 3.6267rem 0.5333rem 0;
        border-top: 1px dashed #e2e2e2;
        color: #666666;
    }
    .n_j2 .j2_item .j2_t3 .t_right {
        max-width: 7.4667rem;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    // 收藏人才
    .com_j2 .j2_item {
        width: 100%;
        background: #ffffff;
        display: block;
        text-decoration: none;
        padding: 0.64rem 0.7467rem 0.64rem;
        border-bottom: 1px solid #eeeeee;
    }
    .com_j2 .j2_item:last-child {
        border-bottom: 0;
    }
    .com_j2 .j2_item .j2_t1 {
        position: relative;
        width: 100%;
        padding-right: 3.6267rem;
        color: #666666;
    }
    .com_j2 .j2_item .j2_t1 .t_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #999999;
    }
    .com_j2 .j2_item .j2_t2 {
        position: relative;
        width: 100%;
        padding: 0.64rem 0;
        color: #666666;
    }
    .com_j2 .j2_item .j2_t2 .t_bt {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #1787fb;
        padding: 0.1493rem 0.4267rem;
        border: 1px solid #1787fb;
        border-radius: 1.152rem;
    }
    .com_j2 .j2_item .j2_t2 .t_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #999999;
    }
    .com_j2 .j2_item .j2_t2 .txt_yellow {
        color: #ffaf24;
    }
    .com_j2 .j2_item .j2_t2 .txt_blue {
        color: #1787fb;
    }
    .com_j2 .j2_item .j2_t3 {
        position: relative;
        width: 100%;
        color: #999999;
    }
    // 企业收藏
    .n_j3 .j3_item {
        width: 100%;
        background: #ffffff;
        margin-top: 0.2133rem;
        display: block;
        text-decoration: none;
        padding: 0 0.8533rem;
    }
    .n_j3 .j3_item .j3_top {
        position: relative;
        padding: 0.64rem 0 0.5333rem 2.9867rem;
    }
    .n_j3 .j3_item .j3_top .top_logo {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        width: 2.3893rem;
        height: 2.3893rem;
        border: 1px solid #e2e2e2;
    }
    .n_j3 .j3_item .j3_top .top_t1 {
        width: 11.52rem;
        color: #333333;
    }
    .n_j3 .j3_item .j3_top .top_t2 {
        width: 11.52rem;
        color: #666666;
        padding: 0.2133rem 0;
    }
    .n_j3 .j3_item .j3_top .top_t3 {
        width: 11.52rem;
        color: #666666;
    }
    .n_j3 .j3_item .j3_bottom {
        position: relative;
        width: 100%;
        color: #666666;
        padding: 0.5333rem 0;
        border-top: 1px dashed #e2e2e2;
    }
    .n_j3 .j3_item .j3_bottom span {
        color: #1787fb;
    }
    .n_j3 .j3_item .j3_bottom .bt_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #1787fb;
        padding: 0.1493rem 0.4267rem;
        border: 1px solid #1787fb;
        border-radius: 1.152rem;
    }

    .j_zixun_listbox {
        .j_zixun_li1 {
            border-bottom: 1px solid #dcdcdf;
            padding: 0.4267rem 0;
            background: #fff;
            display: block;

            margin-top: 0.4267rem;
        }

        .j_zixun_li1 dl {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0 0.64rem;
        }

        .j_zixun_li1 dl dd {
            width: 8.1rem;
            font-size: 0.768rem;
            font-weight: 400;
            color: #000000;
            line-height: 1.024rem;
            height: auto;
            background: none;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .j_zixun_li1 dl dt {
            width: 4.9067rem;
            margin-left: 0.64rem;
            overflow: hidden;
            min-height: 2.5rem;
            border-radius: 0.0427rem;
        }

        .j_zixun_li1 dl dt img {
            width: 100%;
        }

        .j_zixun_li1 p {
            font-size: 0.512rem;
            font-weight: 400;
            color: #888888;
            padding: 0 0.64rem;
            line-height: 1.024rem;
            margin-top: 0.4rem;
        }
    }
}
</style>
